import React from 'react';
import styles from './index.css'
import MyIcon from "../../../component/Icon/icon";
import Cookie from 'js-cookie'

import {Tabs, WhiteSpace} from 'antd-mobile'
import MyLayout from "../../layout";

const tabs = [
    {title: "all"},
    {title: "Ongoing"},
    {title: "Completed"},
]
import Map from 'lodash.map'
import Tloader from 'react-touch-loader';
import {uuid} from "../../../util/uitls";

class Home extends React.Component {
    constructor(props) {
        super()
        this.state = {
            hasMore: true,
            autoLoadMore: false,
            headStylesTop: 97,
            array: [1],
            user: {
                userImage: ""
            }
        }
    }


    handleLoadMore(resolve) {
        var self = this;
        // cc("handleLoadMore")
        setTimeout(() => {
            if (this.state.array.length >= 2) {
                self.setState({
                    hasMore: false,
                })
            } else {
                self.state.array.push(1)
                self.setState({
                    array: this.state.array,
                })
                if (self.state.array.length >= 2) {
                    self.setState({
                        hasMore: false,
                    })
                }
            }

            resolve()
        }, 1000)
    }

    render() {
        return <MyLayout>
            <div>
                <h1 className={styles.h1}>My Courses</h1>
                <Tabs tabs={tabs}
                      initialPage={0}
                      onChange={(tab, index) => {
                          console.log('onChange', index, tab);
                      }}>
                    <div className={styles.tab1}>
                        <Tloader
                            // initializing={initializing}
                            // onRefresh={this.handleRefresh.bind(this)}
                            hasMore={this.state.hasMore}
                            autoLoadMore={true}
                            onLoadMore={(resolve) => this.handleLoadMore.call(this, resolve)}
                            className={styles.tloader}>
                            {
                                Map(this.state.array, (item, index) => {
                                    return <div key={uuid()}>
                                        <div className={styles.row}>
                                            <div className={styles.item}>
                                                <div className={styles.wrappicon}>
                                                    <MyIcon type={"icon-gengduo"} className={styles.gengduo}></MyIcon>
                                                </div>
                                                <div className={styles.imageWrapper}>
                                                    <img src="/static/mycourse/MyCourses@2x_03.gif" alt=""/>
                                                </div>
                                                <div className={styles.description}>
                                                    Business
                                                    Management
                                                </div>
                                                <div className={styles.bloddWrapper}>
                                                    <div className={styles.blood}>
                                                        <div className={styles.bloodActive}
                                                             style={{width: "80%"}}></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className={styles.item}>
                                                <div className={styles.wrappicon}>
                                                    <MyIcon type={"icon-gengduo"} className={styles.gengduo}></MyIcon>
                                                </div>
                                                <div className={styles.imageWrapper}>
                                                    <img src="/static/mycourse/MyCourses@2x_06.gif" alt=""/>
                                                </div>
                                                <div className={styles.description}>
                                                    IT & Cloud
                                                    Computing
                                                </div>
                                                <div className={styles.bloddWrapper}>
                                                    <div className={styles.blood}>
                                                        <div className={styles.bloodActive}
                                                             style={{width: "20%"}}></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className={styles.row}>
                                            <div className={styles.item}>
                                                <div className={styles.wrappicon}>
                                                    <MyIcon type={"icon-gengduo"} className={styles.gengduo}></MyIcon>
                                                </div>
                                                <div className={styles.imageWrapper}>
                                                    <img src="/static/mycourse/MyCourses@2x_10.gif" alt=""/>
                                                </div>
                                                <div className={styles.description}>
                                                    Business
                                                    Management
                                                </div>
                                                <div className={styles.bloddWrapper}>
                                                    <div className={styles.blood}>
                                                        <div className={styles.bloodActive}
                                                             style={{width: "80%"}}></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className={styles.item}>
                                                <div className={styles.wrappicon}>
                                                    <MyIcon type={"icon-gengduo"} className={styles.gengduo}></MyIcon>
                                                </div>
                                                <div className={styles.imageWrapper}>
                                                    <img src="/static/mycourse/MyCourses@2x_12.gif" alt=""/>
                                                </div>
                                                <div className={styles.description}>
                                                    IT & Cloud
                                                    Computing
                                                </div>
                                                <div className={styles.bloddWrapper}>
                                                    <div className={styles.blood}>
                                                        <div className={styles.bloodActive}
                                                             style={{width: "20%"}}></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className={styles.row}>
                                            <div className={styles.item}>
                                                <div className={styles.wrappicon}>
                                                    <MyIcon type={"icon-gengduo"} className={styles.gengduo}></MyIcon>
                                                </div>
                                                <div className={styles.imageWrapper}>
                                                    <img src="/static/mycourse/MyCourses@2x_15.gif" alt=""/>
                                                </div>
                                                <div className={styles.description}>
                                                    Business
                                                    Management
                                                </div>
                                                <div className={styles.bloddWrapper}>
                                                    <div className={styles.blood}>
                                                        <div className={styles.bloodActive}
                                                             style={{width: "80%"}}></div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className={styles.item}>
                                                <div className={styles.wrappicon}>
                                                    <MyIcon type={"icon-gengduo"} className={styles.gengduo}></MyIcon>
                                                </div>
                                                <div className={styles.imageWrapper}>
                                                    <img src="/static/mycourse/MyCourses@2x_16.gif" alt=""/>
                                                </div>
                                                <div className={styles.description}>
                                                    IT & Cloud
                                                    Computing
                                                </div>
                                                <div className={styles.bloddWrapper}>
                                                    <div className={styles.blood}>
                                                        <div className={styles.bloodActive}
                                                             style={{width: "20%"}}></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {index == 1 &&
                                        <div className={styles.bottomNull}>这回真的没有了</div>}
                                    </div>
                                })
                            }

                        </Tloader>
                    </div>
                    <div>
                        tab2
                    </div>
                    <div>
                        tab3
                    </div>
                </Tabs>
            </div>
        </MyLayout>
    }
}

export default Home